<template>
  <div class="flow-sidebar us-none">
    <el-tabs type="card" v-model="activeTab">
      <el-tab-pane label="节点日志" name="logs">
        <logger-drawer></logger-drawer>
      </el-tab-pane>
      <el-tab-pane label="配置管理" name="second">
        <node-operation></node-operation>
      </el-tab-pane>
      <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
      <el-tab-pane label="帮助文档" name="help">
        <div @click="openHelp" style="cursor: pointer;color:#0000ee; text-decoration: underline;">帮助文档</div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { createNamespacedHelpers } from 'vuex'
import NodeOperation from './NodeConfig/Index.vue'
import LoggerDrawer from './logger/Index.vue'
import NodeConfigMixin from '../../libs/NodeConfigMixin'
import { AppParams } from '@/utils/appParams'
import { Emitter } from "@/utils/Emitter";
import { System } from "@/api/SystemApi";

const { mapState: infoState } = createNamespacedHelpers('flow/info')

export default {
  name: 'FlowSidebar',
  mixins: [NodeConfigMixin],
  components: {
    NodeOperation,
    LoggerDrawer,
  },
  data () {
    return {
      tab: 'info',
      activeTab: 'logs',
      ClickNode: null
    }
  },
  computed: {
    ...infoState({
      infos: state => state.content
    })
  },
  methods: {
    openHelp () {
      System.OpenFile({ Path: '', FileName: 'docs/index.html' })
    }
  },
  mounted () {
    Emitter.on(AppParams.JAVA_SCRIPT_EVENT.NODE_CLICK, () => {
      this.ClickNode = this.currentClickNodeMixin
    })
  }
}
</script>

<style lang="less" scoped>
@import "../flow/styles/index.less";

.flow-sidebar {
  footer {
    border-top: 1px solid #bbbbbb;
    background: #fafafa;
    text-align: right;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 25px;
    line-height: 23px;
    padding: 0 10px;
    user-select: none;

    .button-group:not(:last-child) {
      margin-right: 5px;
    }
  }
}
</style>
